import React, {useEffect, useState} from "react";
import styles from "./index.less"

const ZmClock = () => {
    const [date, setDate] = useState<string>();
    const [time, setTime] = useState<string>()
    let timer: number;
    const initData = () => {
        const date = new Date()
        const year = date.getFullYear();
        const mouth = isAddZero(date.getMonth()+1);
        const day = isAddZero(date.getDate());
        const week = transformWeek(date.getDay())
        const hours = isAddZero(date.getHours());
        const minutes = isAddZero(date.getMinutes());
        const seconds = isAddZero(date.getSeconds());
        setTime(`${hours}:${minutes}:${seconds}`)
        setDate(`${year}年 ${mouth}月 ${day}日 ${week}`)
        requestAnimationFrame(initData)
    }
    const isAddZero = (val: number) => {
        if (val < 10) {
            return `0${val}`
        }
        return `${val}`
    }
    const transformWeek = (val: number) => {
        let temp;
        switch (val) {
            case 0:
                temp = "星期日"
                break;
            case 1:
                temp = "星期一";
                break;
            case 2:
                temp = "星期二";
                break;
            case 3:
                temp = "星期三";
                break;
            case 4:
                temp = "星期四";
                break;
            case 5:
                temp = "星期五";
                break;
            case 6:
                temp = "星期六";
                break;
        }
        return temp
    }

    useEffect(() => {
        timer = requestAnimationFrame(initData)
        return () => {
            cancelAnimationFrame(timer)
        }
    }, []);

    return <div className={styles["container"]}>
        <div>{date}</div>
        <div className={styles["time"]}>{time}</div>
        <div>天气:获取失败</div>
    </div>
}
export default ZmClock;